<template>
	<view>
		<u-index-list :scrollTop="scrollTop">
			<view v-for="(item, index) in indexList" :key="index">
				<!-- 字母列表 -->
				<u-index-anchor :index="item" />
				<!-- 当前字母列表下的数据 -->
				<view class="list-cell" v-for="(user,index) in userListGroup[item].user " :key="index">
					<image :src="user.avatar" style="width: 60rpx; height: 60rpx;"></image>
					{{user.tag}}{{user.name}}
				</view>
			</view>
		</u-index-list>
	</view>
</template>

<script>
	import userList from '../../common/usersLsit.js'
	export default {
		data() {
			return {
				userListGroup:{},
				scrollTop: 0,
				indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U",
					"V", "W", "X", "Y", "Z"
				]
			}
		},
		
		onLoad() {
			// 得到useList列表, 筛选出 tag 与 indexList 相似的数据
			userList.sort((a, b) => {
				var tagA = a.tag.toUpperCase(); 
				var tagB = b.tag.toUpperCase()
				if (tagA < tagB) {
					return -1 
				} else if (tagA > tagB) {
					return 1
				} else {
					return 0
				}
			})
			let userListGroup = {}
			userList.map(item => {
				if(!userListGroup[item.tag]) {
					// 创建每个字母的对象
					userListGroup[item.tag] = {}
					// 创建字母对象里存储用户的数组
					userListGroup[item.tag].user = []
				}
				userListGroup[item.tag].user.push(item)
			})
			this.userListGroup = userListGroup
			console.log(userListGroup)
			
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style lang="scss">
.list-cell{
	height: 100rpx;
	width: 96%;
	display: flex;
	align-items: center;
	margin-left: 2%;
	image{
		margin-right: 20rpx;
	}
}
</style>
